<template>
  <div>
    <CommonCard title="今日订单" :count="orderToday">
      <template #main>
        <!-- 第一步：准备一个具备宽高的容器，把回头生成的图标渲染在这个容器中 -->
        <div class="main" ref="chartsRef"></div>
      </template>
      <template #bottom>
        <span>昨日订单量</span>
        <span class="left">{{ orderLastDay }}</span>
      </template>
    </CommonCard>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'TodayOrder',
})
</script>

<script lang="ts" setup>
import { useEchartsStore } from '@/stores/echarts'
import { computed, ref, onMounted,watch } from 'vue';
import { $echarts } from '@/plugins/charts'
// 防抖节流包
import debounce from 'lodash/debounce'
const echartsStore = useEchartsStore()
// orderToday: number;
// orderLastDay: number;
// orderTrend: number[];
// orderTrendAxis: string[];
const orderToday = computed(() => {
  return echartsStore.echartsData.orderToday
})
const orderLastDay = computed(() => {
  return echartsStore.echartsData.orderLastDay
})
const orderTrend = computed(() => {
  return echartsStore.echartsData.orderTrend
})
const orderTrendAxis = computed(() => {
  return echartsStore.echartsData.orderTrendAxis
})
// echarts可以在react vue等多个框架中都能用，所以不能定义为ref对象
// 初始化图标实例，需要的是一个普通变量 不需要写成ref对象
let myChart: any
// 定义容器
const chartsRef = ref()
onMounted(() => {
  // 第二步：使用echarts中的init方法生成图标实例
  myChart = $echarts.init(chartsRef.value)
  // 第三步：使用setOption方法生成图标 传递配置对象
  myChart.setOption(getOption())

  // 多次频繁触发变成少次触发 是节流
  // 监听浏览器窗口的大小变化，重新加载图表
  // debounce 
  // 参数1：真正的事件处理回调函数
  // 参数2：延迟事件 返回值防抖之后的新函数
  window.onresize=debounce(function(){
    myChart.resize()
  },60)
})
// 返回配置对象的一个函数
function getOption() {
  return {
    // 控制图表和容器的距离
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  // 提示
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    data: orderTrendAxis.value,
    show: false, //x轴内容是否显示
    boundaryGap: false, //两侧是否留白
    },
  yAxis: {
    show: false,//y轴内容是否显示
    },
  series: [
    {
      type: 'line',
      data: orderTrend.value,
      lineStyle: { //控制线条样式
        opacity: 0
      },
      itemStyle: { //折线拐点样式
        opacity: 0
      },
      areaStyle: { //区域填充样式
        color: 'pink'
      },
      smooth: true,  //是否平滑曲线显示
    }
  ],
  }
}

// 监视数据的变化【请求回来了的数据】
watch(orderToday,()=>{
  myChart.setOption(getOption())
})
</script>


<style scoped>
.main {
  height: 50px
}
</style>